<template>
    <div class="centerRight2">
        <div>
            <a-input class="theInput" placeholder="搜索位置" />
        </div>
        <div class="range-row">
            <a-range-picker class="theDatePicker" :placeholder="['开始时间', '结束时间']" />
        </div>
        <div class="categories-row">
            <a-checkbox-group v-model:value="value1" name="checkboxgroup" :options="plainOptions" />
        </div>
        <div class="button-row">
            <a-button type="primary">查询</a-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue'

const plainOptions = ['坑槽', '横向裂缝', '纵向裂缝', '网状裂缝',];
const value1 = ref<string[]>([]);
// interface FormState {
//     username: string;
//     password: string;
//     remember: boolean;
// }


// const formState = reactive<FormState>({
//     username: '',
//     password: '',
//     remember: true,
// });
// const onFinish = (values: any) => {
//     console.log('Success:', values);
// };

// const onFinishFailed = (errorInfo: any) => {
//     console.log('Failed:', errorInfo);
// };

</script>

<style lang="scss" scoped>
$box-height: 210px;
$box-width: 400px;

.centerRight2 {
    padding: 16px;
    padding-top: 20px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;

    .theInput {
        background-color: rgba(7, 7, 7, 0.336);
        color: white;
        padding: 8px;
        // border: 1px solid white;

        border: 1px solid #2869a3;
        // width: 500px;
        // font-size: 18px;

        &:focus {
            border: 1px solid rgb(0, 204, 255);
            box-shadow: 0 0 8px rgb(0, 204, 255);
        }
    }

    .range-row {
        margin-top: 10px;

        .theDatePicker {
            background-color: rgba(7, 7, 7, 0.336);
            color: white;
            padding: 8px;
            border: 1px solid #2869a3;
            ;
            width: 100%;

            .ant-picker-input-active {
                color: #ffffff !important;
            }

            ::v-deep .ant-picker-input {
                input {
                    color: #ffffff !important;
                }
            }
        }
    }

    .categories-row {
        margin-top: 10px;
        color: #ffffff;

        ::v-deep .ant-checkbox-wrapper {
            color: #ffffff;
        }
    }

    .button-row {
        margin-top: 10px;

        ::v-deep .ant-btn-primary {
            background-color: rgba(19, 115, 129, 0.3);
            border-color: #2869a3;
        }
    }


    .theSelect {
        background-color: rgb(66, 66, 66);
        color: white;
        padding: 2px 7px;
        outline: none;
    }
}
</style>
